<template>
	<view class="posterContainer" catchtouchmove="true">
		<!-- 海报 -->
		<canvas type='2d' canvas-id="zwyPoster" :style="{ width: cansWidth + 'px', height: cansHeight + 'px' }"
			class="isCan"></canvas>
		<image v-if="tempImgShow" @longpress="longpress" class="showImg"
			:style="{ width: cansWidth + 'px', height: cansHeight + 'px' }" :src="tempImg"></image>
		<view v-if="tempImgShow" class="fixedBox">
			<view class="boxLeft"><button class="flexBtn btnLeft" hover-class="btnHover"
					@click="longpress">长按图片保存</button></view>
			<view class="boxRight"><button class="flexBtn btnRight" hover-class="btnHover"
					@click="closeCans">关闭</button></view>
		</view>
	</view>
</template>

<script>
	let nowTop = '';
	export default {
		props: {},
		data() {
			return {
				// 海报
				tempImgShow: false,
				tempImg: '',
				cansWidth: 270, //海报宽度
				cansHeight: 430 //海报高度
			};
		},
		methods: {
			drawPoster(val) {
				this.tempImg = val
				this.tempImgShow = true;
				uni.hideLoading()

			},
			longpress() {
				uni.downloadFile({
					url: this.tempImg,
					success: (downloadResult) => {
						console.log('下载成功', downloadResult.tempFilePath)
						uni.saveImageToPhotosAlbum({
							filePath: downloadResult.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '保存相册成功'
								});
								console.log('save success');
							},
							fail(res) {
								console.log(res);
								if (res.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {},
													fail(res) {
														console.log(res);
													}
												});
											}
										}
									});
								}
							}
						});
					},
					fail: (err) => {
						console.log('下载失败', err)
					}
				})

			},
			closeCans() {
				this.$emit('closePost');
			},
		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.fixedBox {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 30rpx;
		left: 0;
		display: flex;
		z-index: 1000;

		.boxLeft,
		.boxRight {
			width: 50%;
			height: 100rpx;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1000;
			justify-content: center;

			.flexBtn {
				position: relative;
				z-index: 1000;
				width: 200rpx;
				height: 60rpx;
				text-align: center;
				line-height: 55rpx;
				font-size: 24rpx;
				border-bottom: 6rpx #f58365 solid;
				border-radius: 32rpx;
				color: white;
				background: linear-gradient(to left, #f58365, #ff188a);
			}
		}
	}

	.btnHover {
		height: 55rpx !important;
		border-bottom: 0 #f6be3c solid !important;
		transform: translateY(3px) translateZ(0px) !important;
	}

	.isCan {
		// border: 6px solid white;
		border-radius: 10px;
		z-index: 999;
		position: fixed;
		left: 0;
		// right: 0;
		// bottom: 0;
		top: -99999px;
		margin: auto;
		background-size: 100%;
	}

	.showImg {
		border: 6px solid white;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 1111;
	}
</style>